/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import type { ConnectState } from '@/models/connect';
import { connect } from 'umi';
import moment from 'moment';
import type { CloudSmsDataType, CloudSmsSearchIndexType } from '../types/CloudSmsSearch';
import { CloudSmsCoulmns, getRanString } from './utils';
import CommonColumns from './_common/CommonColumns';
import CommonResetButton from './_common/CommonResetButton';
const FormItem = Form.Item;

interface FormType {
  time: any;
  phone: string;
}

const CloudSmsSearch = (props: CloudSmsSearchIndexType) => {
  const { screenSize, dispatch, cloudSmsList } = props;
  const [form] = Form.useForm();

  const getPattenColumn = (item: any) => {
    if (item.user_type) {
      return [
        item.user_type == '1'
          ? {
              title: '发送业务员',
              dataIndex: 'cm_info',
            }
          : {
              title: '发送网点',
              dataIndex: 'shop_info',
            },
      ];
    } else {
      return [];
    }
  };

  const onFinish = (values: FormType) => {
    const { phone, time } = values;
    dispatch({
      type: 'customerSearch/getCloudSmsList',
      payload: { phone, time: moment(time).format('YYYY-MM-DD') },
    });
  };
  // /CustomerService/cloudSms
  const formatColumns = (data: CloudSmsDataType) => {
    const { wechat_status, push_tao_status, has_outstorage, call_duration, txt, voice_path } = data;
    const getColor = (text: string) =>
      text == 't' ? '#469b5f' : text == 'f' ? '#fb0714' : '#e7781f';

    return CloudSmsCoulmns.map((item: any) => {
      switch (item.dataIndex) {
        case 'wechat_status':
          item.render = () => (
            <span style={{ color: getColor(wechat_status) }}>
              {wechat_status == 't' ? '成功' : wechat_status == 'f' ? '失败' : wechat_status || ''}
            </span>
          );
          break;
        case 'push_tao_status':
          item.render = () => (
            <span
              style={{
                color: getColor(
                  push_tao_status == '成功' ? 't' : push_tao_status == '失败' ? 'f' : '',
                ),
              }}
            >
              {push_tao_status}
            </span>
          );
          break;
        case 'has_outstorage':
          item.render = () => (has_outstorage == 't' ? '是' : has_outstorage == 'f' ? '否' : '--');
          break;
        case 'call_duration':
          item.render = () => (call_duration ? `${call_duration}秒` : '--');

          break;
        case 'txtType':
          item.render = () => (txt ? '文字模版' : '语音模版');
          break;
        case 'txt':
          item.render = () =>
            txt ? txt : <audio style={{ height: 30 }} controls src={voice_path} />;
          break;

        default:
          break;
      }
      return item;
    });
  };

  const onReset = () => {
    form.resetFields();
    dispatch({
      type: 'customerSearch/save',
      payload: { cloudSmsList: [] },
    });
  };

  return (
    <>
      <Form
        form={form}
        onFinish={onFinish}
        layout={screenSize ? 'vertical' : 'inline'}
        style={{ marginBottom: 20 }}
      >
        <FormItem
          label={'手机号/单号'}
          name='phone'
          rules={[{ required: true, message: '请输入手机号/单号' }]}
        >
          <Input allowClear style={{ width: 200 }} placeholder={'请输入手机号/单号'} />
        </FormItem>
        <FormItem label={'拨打日期'} name='time' initialValue={moment()}>
          <DatePicker style={{ width: 200 }} disabledDate={(event) => event > moment()} />
        </FormItem>
        <FormItem>
          <Button type='primary' htmlType='submit' loading={false}>
            查询
          </Button>
          <CommonResetButton onReset={onReset} />
        </FormItem>
      </Form>
      {cloudSmsList?.map((item) => (
        <CommonColumns
          screenSize={screenSize}
          key={getRanString()}
          columns={[...formatColumns(item), ...getPattenColumn(item)]}
          data={item}
          labelSpan={screenSize ? 7 : 4}
          contentSpan={screenSize ? 14 : 16}
        />
      ))}
    </>
  );
};

export default connect(({ customerSearch, loading }: ConnectState) => ({
  cloudSmsList: customerSearch.cloudSmsList || [],
  tableLoading: loading.effects['customerSearch/getCloudSmsList'] || false,
}))(React.memo(CloudSmsSearch));
